$(function () {


    var cardViewThreshold = 580;

    /* Set a locale manually */
    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']);

    $('#table').bootstrapTable({
        cardView: document.body.clientWidth < cardViewThreshold,
        striped: true,
        search: true,
        showColumns: true,
        showToggle: true,
        showExport: true,

        columns: [{
            field: 'id',
            title: 'Item ID',
            sortable: true
        }, {
            field: 'name',
            title: 'Item Name',
            sortable: true
        }, {
            field: 'price',
            title: 'Item Price',
            sortable: true
        }],
        data: [{
            id: 1,
            name: 'Item 1',
            price: '呵呵'
        }, {
            id: 2,
            name: 'Item 2',
            price: '$2'
        }]
    });

    /* Auto adjust the table's view type (table/card) when screen size changes */
    window.onresize = function () {
        $('#table').bootstrapTable('refreshOptions', {
            cardView: document.body.clientWidth < cardViewThreshold
        });
    };
});